<template>
	<!--顶头-->
	<div class="toubu">
		<section @click="show">
			<i class="iconfont icon-icon- dian">
				<em ></em>
			</i>
		</section>
		<div class="ttt">
			<a href="javascript:void(0)">
	 			<img src="~@/assets/img/logo.png" alt="" />
	 		</a>
	 		<span class="iconfont icon-xiazai7"></span>
		</div>
 	  	<i  @click="searchShow()" class="iconfont icon-sousuo"></i>
 	  	
 	  	<!-----遮罩层----->
 	  	<div :class="{tianchuan:isShow,ycshow:needShow}">
 	  		<div class="popup">
				<div class="banner"></div>
				<p>已加载好您感兴趣的头条</p>
				<div class="download-btn" data-node="downloadBtn">立即打开</div>
				<div class="close" data-node="close" @click="close"></div>
			</div>
 	  	</div>
 	  	<!-----搜索------->
 	  	<div :class="{serch:is,move:search_show}">
 	  		<div class="dingbu">
				<span class="title">
					<a href="">搜索</a>
				</span>
				<span class="backBtn" @click="searchShow()">
					<a></a>
				</span>
			</div>
			<form>
				<div class="search_box">
					<a href="javascript:void(0)" class="action_toutiao"></a>
					<div class="sanjiaoxing"></div>
					<input type="search" placeholder="请输入搜索关键词" >
				</div>
			</form>
			<div class="hot_words">
				<ul>
					<li v-for="item in this.$store.state.serach">
						<a href="javascript:void(0)">{{item.title}}</a>
					</li>
				</ul>
			</div>
 	  	</div>
 	  	<!----------------------引入导航栏------------>
 	  	<nav is="Nav"></nav>
	</div>
	
</template>

<script>
	import BScroll from 'better-scroll';
	import CONFIG from "@/config";
	import axios from 'axios';
	import Nav from "@/components/Nav";
//	import headerpull from '@/components/headerpull';
export default {
	data() {
		return {
			is:true,
			search_show:false,
			needShow: false,
			isShow:true,
		}	
	},
	components:{
		Nav
	},
	methods:{
        show(){
        	this.needShow=true
//      	alert(111)
        },
        close(){
        	this.needShow=false
//      	alert(1115555)
        },
        searchShow(){
			this.search_show = !this.search_show
		},
	}
}</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" >
@import "~@/assets/scss/common";
@import "~@/assets/scss/iconfont";
.tianchuan{
	display: none;
	position: fixed;
    top: 0;
    left:0;
    bottom:0;
    right:0;
    z-index: 150;
    background: rgba(0, 0, 0, 0.5);
    .popup{
    	background: #fff;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    border-radius: 10px;
        width: 260px;
        height: 233px;
        margin-left: -130px;
        margin-top: -105px;
        .banner{
        	background: url(../assets/img/popup_banner.png) no-repeat ;
        	background-size: contain;
    	    margin-top: 10px;	
	        margin-left: 42px;
            height:120px;
            width: 180px;
        }
        p{
        	text-align: center;
    		color: #a5a5a5;
    		line-height: 36px;
		    margin-bottom: 10px;
		    font-size: 16px;
	        margin-top: 6px;
        }
        .download-btn{
        	background: #ff6762;
    		text-align: center;
    		margin-left: 10%;
    		display: inline-block;
    		border-radius: 10px;
			color: #fff;
			line-height: 40px;
			font-size: 20px;
			    width:200px;
			margin-bottom: 5px;
        }
        .close{
        	background: url(../assets/img/close.png) no-repeat center;
        	position: absolute;
			right: 13px;
			top: 9px;
			width:27px;
			height:20px;
        }
    }
}
.serch{
	position: fixed;
    top: 0;
    transition: all 1s;
    transform: translatex(100%);
     background-color: #fff;
     width: 100%;
     height: 100%;
     z-index:90;
     .dingbu{
        width: 100%;
        height: 50px;
        position: relative;
        background-color: #d43d3d;
        .title{
            display: block;
            text-align: center;
            line-height: 50px;
            font-weight: 700;
            a{
                color: #fff;
                text-decoration: none;
                font-weight: 900;
                font-size: 16px;
            }
        }
        .backBtn{
            width: 44px;
            height: 50px;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            cursor: pointer;
            a{
                width: 50%;
                height: 50%;
                background: url("~@/assets/img/fanhui.png") no-repeat 50%;
                background-size: 100%;
                display: block;
            }
        }
    }
    form{
	    background: #c9c9c9;
		position: relative;
		.search_box{
			padding: 5px;
			.action_toutiao{
				display: block;
			    width: 40px;
			    height: 27px;
			    position: absolute;
    			left: 5px;
    			background: url("../assets/img/search_icons.png") #fff no-repeat 5px -35px;
    			background-size: 20px;
			}
			.sanjiaoxing{
				display: inline-block;
				position: absolute;
			    top: 18px;
			    left: 33px;
			    border-right: transparent 3px solid;
			    border-left: transparent 3px solid;
			    border-top: #c9c9c9 3px solid;
			    width: 0;
			    height: 0;
			}
			input{
			    border: 0;
			    border-radius: 3px;
			    margin: 0;
			    width: 100%;
			    font-size: 16px;
			    -webkit-appearance: none;
			    padding: 5px 10px 5px 40px;
			    box-sizing: border-box;
			    -webkit-box-sizing: border-box;
			    color: #666;
			    background: #fff;
			}
		}
    }  
    .hot_words{
    	width: 100%;
    	ul{
		    text-align: center;
		    li{
		    	display: inline-block;
    			margin: 15px 5px 0;
    			a{
    				display: block;
				    background: #f5f5f5;
				    color: #363636;
				    font-size: 15px;
				    text-decoration: none;
				    padding: 5px;
    			}
		    }
    	}
    } 
    
}
.move {
        transform: translatex(0);
    } 
.ycshow{
	display: block!important;
}
</style>